<template>
    <Categories :active="active">
        <div id='list' style="min-height: 20vh">
            <div class="tl-margin-auto tl-margin-top-10">
                <el-row>
                    <el-col class="tl-padding-15" :xs="24" :sm="12" :md="8" :lg="6" v-for="blog in blogList" :key="blog.id">
                        <div class="card tl-overflow-hidden tl-border-radius-8">
                            <div class="card_cover">
                                <a class="tl-display-block tl-overflow-hidden tl-position-absolute tl-inset-0 tl-margin-0" :href="`/web/blog/${blog.id}`" target="_blank">
                                    <img class="blog-img-1" :src="blog.firstPicture ? blog.firstPicture : 'https://th.wallhaven.cc/small/ym/ymojgd.jpg'" alt="正在加载...">
                                </a>
                                <div class="overlay"></div>
                            </div>
                            <div class="card_body">
                                <div class="card_title">
                                    <el-link :href="`/web/blog/${blog.id}`" target="_blank" :underline="false">
                                        <span class="title tl-font-16-px tl-font-weight-700">{{ blog.title }}</span>
                                    </el-link>
                                </div>
                                <div class="tl-text-no-select tl-font-12-px">
                                    <div class="card_date tl-margin-5-0">
                                        <time :datetime="blog.createTime" v-text="moment(blog.createTime).format('MMMM Do YYYY')"></time>
                                    </div>
                                    <div class="card_category">
                                        <div v-if="blog.types && blog.types.length">
                                            <el-link v-for="type in blog.types" :key="type.id" class="tl-font-10-px tl-margin-right-5" type="info">#{{ type.name }}</el-link>
                                        </div>
                                        <div v-else>未分类</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>

                <!-- 分页  -->
                <el-pagination background class="tl-text-center"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="queryInfo.pageNum"
                               :page-size="queryInfo.pageSize"
                               :page-sizes="[12, 20, 32, 40]"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="total">
                </el-pagination>
            </div>
        </div>
    </Categories>
</template>

<script>
import Categories from '@/views/category/Categories';
import { list } from '@/api/blog/blog';
import moment from 'moment';

export default {
    name: 'CateList',
    components: { Categories },
    data: function () {
        return {
            avatar_url: this.$store.state.avatar_url,
            text: `人生能有多少个十年，身边除了家人，又有多少人能陪伴你十年，一辈子很短，能坚持的事不多。我一直觉得，人活下去的动力就是期待，期待明天，期待未来，
                期待下一个十年，期待以后的生活。上一个十年就这样过去了，下一个十年会是怎样，我很想知道，那就记录下来吧！
                期待下一个十年，期待以后的生活。上一个十年就这样过去了，下一个十年会是怎样，我很想知道，那就记录下来吧！
                期待下一个十年，期待以后的生活。上一个十年就这样过去了，下一个十年会是怎样，我很想知道，那就记录下来吧！
                期待下一个十年，期待以后的生活。上一个十年就这样过去了，下一个十年会是怎样，我很想知道，那就记录下来吧！`,
            active: this.$route.params.cate,
            queryInfo: {
                typeName: '',
                pageNum: 1,
                pageSize: 10
            },
            total: 0,
            blogList: []
        }
    },
    methods: {
        moment,
        getBlogList: async function () {
            this.queryInfo.typeName = this.$route.params.cate
            const res = await list(this.queryInfo);
            if (res.code === 404) {
                return await this.$router.push('/404')
            }
            if (res.code ^ 200) {
                return this.$message({ showClose: true, message: res.msg, type: 'error' });
            }
            this.blogList = res.data.rows;
            this.total = res.data.total;
        },
        handleSizeChange (val) {
            this.queryInfo.pageSize = val
            this.getBlogList();
        },
        handleCurrentChange (val) {
            this.queryInfo.pageNum = val;
            console.log(`当前页: ${val}`);
        }
    },
    created: function () {
        this.getBlogList()
    },
    mounted () {
    },
    watch: {
        $route () {
            this.active = this.$route.params.cate;
        },
        deep: true
    }
}
</script>

<style lang='less' scoped>
#list {
    min-height: calc(100vh - 205px);

    .blog-img-1 {
        //width: 300px;
        //height: 200px;
        visibility: visible;
        position: absolute;
        //inset: 0px;
        box-sizing: border-box;
        padding: 0;
        border: none;
        margin: auto;
        display: block;
        width: 0;
        height: 0;
        min-width: 100%;
        max-width: 100%;
        min-height: 100%;
        max-height: 100%;
        object-fit: cover;
    }
}
.card {
    background-color: #FFFFFF;
    border-radius: 6px;
    box-shadow: rgb(2 10 18 / 10%) 0 5px 40px -1px;
    //border: #C8C8C8 solid 2px;
    transition: top 500ms, box-shadow 500ms; /* 过渡动画 */
    top: 0;
    position: relative;

    ::v-deep * {
        font-family: 'Monaco', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
    }

    //&:hover {
    //    top: -10px;
    //    position: relative;
    //    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .3) !important;
    //    box-shadow: 0 0 15px rgba(0, 0, 0, .3) !important;
    //    //-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5) !important;
    //    //box-shadow: 0 0 20px rgba(0, 0, 0, .5) !important;
    //}

    .card_cover {
        height: 150px;
        position: relative;
        transition: all 0.45s ease-in-out 0s;
        cursor: pointer;

        &:hover {
            img {
                transform: scale(1.05);
            }

            .overlay {
                opacity: 0.5;
            }
        }

        img {
            //border-radius: 6px 6px 0 0;
            transition: all 0.45s ease-in-out 0s;
            transform-origin: center center;
        }

        .overlay {
            //border-radius: 6px 6px 0px 0px;
            position: absolute;
            inset: 0;
            background-color: rgba(22, 29, 39, 0.66);
            opacity: 0;
            transition: opacity 0.3s ease-in-out 0s;
        }
    }

    .card_body {
        padding: 12px 14px;

        .card_title {
            a {
                display: block;
                -webkit-text-decoration: none;
                text-decoration: none;
                //color: #161e27;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>
